<template>
    <div class="ossList pl10 pr10 ">
        <avue-crud
            class="crud"
            v-model="dialogForm"
            ref="crud"
            :table-loading="loading"
            :data="data"
            :option="option"
            @on-load="onLoad"
            @row-save="handleSave"
            @row-update="handleUpdate"
            @row-del="handleDel"
            :search.sync="searchForm">
            <!-- 自定义菜单-->
            <template slot-scope="scope" slot="menuLeft">
                <!--<el-button type="warning" size="mini">数据源</el-button>-->
                <!-- 目录列表 -->
                <div class="breadcrumb">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item
                            v-for="(item, index) in currentPathList"
                            :key="index"
                        >
                            <el-link
                                :underline="false"
                                @click="handleJumpPath(index, item)"
                            >{{ item.name }}
                            </el-link>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </template>

            <template slot-scope="scope" slot="menuRight">
                <el-button icon="el-icon-upload2" type="primary" size="mini" @click="popup.uploadFile=true">
                    上传文件
                </el-button>
                <el-button icon="el-icon-folder" size="mini" @click="handleAddFolder">创建文件夹</el-button>
            </template>

            <!--row插槽-->
            <template slot-scope="{row}" slot="fileName">
                <div class="file-name" @click="handleFile(row)">
                    <svg-icon
                        class="file-svg"
                        :icon-class="parseType(row.fileName, row.suffix)"
                    />
                    <span class="ml5">{{ row.fileName }}</span>
                </div>
            </template>
            <template slot-scope="{row}" slot="fileType">
                <el-tag v-show="row.fileType === '文件夹'">{{ row.fileType }}</el-tag>
                <el-tag v-show="row.fileType === '文件'" type="danger">{{ row.fileType }}</el-tag>
            </template>
            <!--自定义操作栏-->
            <!-- <template slot-scope="{type,size}" slot="menu">-->
            <!--                <el-button type="text" size="mini">业务功能</el-button>-->
            <!--            </template>-->
        </avue-crud>

        <UploadFile v-model="popup.uploadFile" :folder-path="this.searchForm.folderPath"
                    @getData="getData(searchForm)"></UploadFile>
    </div>
</template>
<script>
import noPage from "@/mixins/noPage";
import {parseMimeTypeToIconName} from '@/utils'
import UploadFile from "./components/uploadFile";

export default {
    name: "ossList",
    mixins: [noPage],
    components: {
        UploadFile,
    },
    data() {
        return {
            //分页参数
            searchForm: {
                folderPath: ''
            },
            urls: {
                0: 'oss',
                1: 'findAll',
            },
            popup: {
                uploadFile: false,
            },
            data: [],
            option: {
                ...window.avueCrud,
                addBtn: false,
                viewBtn: true,
                delBtn: true,
                editBtn: false,
                // 列设置
                // clearExclude: ["schoolName"], //搜索不清空
                column: [
                    {
                        label: '文件名称',
                        prop: 'fileName',
                        align: 'left',
                        span: 24,
                        width: 280
                    },
                    {
                        label: '文件',
                        prop: 'viewPath',
                        type: 'img',
                        width: '130',
                        display: false,
                    },
                    {
                        label: '查看路径',
                        prop: 'view',
                        // hide: true,
                        display: false,
                        viewDisplay: true,
                        formatter(row) {
                            return row.viewPath
                        }
                    },
                    {
                        label: '文件大小',
                        prop: 'sizeCase',
                        width: '90',
                        display: false,
                    },
                    {
                        label: '类型',
                        prop: 'fileType',
                        width: '90',
                        display: false,
                    },
                    {
                        label: '后缀',
                        prop: 'suffix',
                        hide: true,
                        display: false,
                    },
                    {
                        label: '存储路径',
                        prop: 'filePath',
                        hide: true,
                        display: false,
                    },
                    {
                        label: '创建时间',
                        prop: 'createAt',
                        display: false,
                        width: '130',
                    },
                    {
                        label: '修改时间',
                        prop: 'updateAt',
                        display: false,
                        width: '130',
                    },
                ],
            },
            dialogForm: {},
            currentPathList: [{
                name: '根目录',
                path: ''
            }],
        };
    },
    methods: {
        async handleAddFolder() {
            this.$refs.crud.rowAdd()
        },
        async handleSave(row, done) {
            const {code, msg} = await this.$api.oss.createFolder({
                folderPath: this.searchForm.folderPath + '/' + row.fileName,
            })
            if (code === 200) {
                await this.getData(this.searchForm)
                this.$notify({
                    message: msg || '创建成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done()
        },
        handleFile(row) {
            if (row.isFolder) {
                this.searchForm.folderPath = row.folderPath
                this.getData(this.searchForm)
                this.currentPathList.push({
                    name: row.fileName,
                    path: row.folderPath
                })
            } else {
                this.$refs.crud.rowView(row)
            }
        },
        parseType(fileName, type) {
            if (type === 'dir') {
                return 'file-type-dir'
            }
            return parseMimeTypeToIconName(fileName)
        },
        handleJumpPath(index, item) {
            if (index === -1 && this.currentPathList.length > 0) {
                this.currentPathList = []
            } else if (index >= 0 && this.currentPathList.length - 1 !== index) {
                this.currentPathList = this.currentPathList.slice(0, index + 1)
            }
            this.searchForm.folderPath = item.path
            this.getData(this.searchForm)
        },
        async handleUpdate(row, index, done) {
            const {code} = await this.$api.svipAccount.update(row.id, {
                bduss: row.bduss,
                name: row.name,
                isUsing: row.isUsing,
                stoken: row.stoken,
                status: row.status,
                isLose: row.isLose
            })
            if (code === 200) {
                this.getData(this.searchForm)
                this.$notify({
                    message: '更改成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done()
        },
        async handleDel(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                .then(async () => {
                    const {code} = await this.$api.oss.remove({
                        filePath: row.filePath
                    })
                    if (code === 200) {
                        this.getData(this.searchForm)
                        this.$notify({
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },

    }
};
</script>

<style lang="scss" scoped>
::v-deep.ossList {
    .file-svg {
        font-size: 20px;
    }

    .file-name {
        cursor: pointer;
    }

    .crud {
        .breadcrumb {
            padding-top: 10px;

            .el-breadcrumb {
                span {
                    font-weight: bold !important;
                }
            }
        }
    }

}
</style>
